<template>
  <div class="h-full">
    <n-card class="shadow-sm rounded-16px">
      <n-form class="w-full" size="small" inline>
        <n-form-item label="日期:" label-placement="left">
          <n-date-picker v-model:value="machineAlarmRange" style="width: 300px" type="daterange" clearable />
        </n-form-item>
        <n-form-item label="" label-placement="left">
          <n-button type="primary" :on-click="getMachineAlarmList">
            <template #icon><icon-mdi-map-search-outline /></template>
            查询
          </n-button>
        </n-form-item>
      </n-form>
      <vxe-grid v-bind="machineAlarmOptions" @cell-dblclick="cellDBLClickEvent"></vxe-grid>
      <n-modal v-model:show="showMachineAlarmHis" style="width: 900px">
        <n-card style="width: 900px" :bordered="false" closable aria-modal="true" @close="handleClose">
          <template #cover>
            <img :src="alarmImg" style="height: 300px" />
          </template>
          <n-data-table
            :max-height="450"
            style="margin-top: 10px"
            size="small"
            scroll-x="1000px"
            :columns="machineAlarmHisColumns"
            :data="machineAlarmHisData"
          />
        </n-card>
      </n-modal>
    </n-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { DataTableColumns } from 'naive-ui';
import dayjs from 'dayjs';
import type { VxeGridProps, VxeTableEvents } from 'vxe-table';
import { fetchMachineAlarmHis, fetchMachineAlarmList } from '@/service';

const machineAlarmRange = ref<[number, number]>([dayjs().add(-1, 'day').valueOf(), Date.now()]);
const machineAlarmOptions = reactive<VxeGridProps>({
  border: true,
  size: 'mini',
  showFooter: true,
  align: null,
  rowConfig: { isHover: true },
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'AREANAME',
      title: '车间',
      width: '100px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PROCESSOPERATIONNAME',
      title: '工序',
      width: '100px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'MACHINENAME',
      title: '设备',
      width: '100px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'DESCRIPTION',
      title: '描述',
      width: '100px',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'ALARMTEXT',
      title: '报警内容',
      width: '200px',
      showOverflow: true
    },
    {
      field: 'ALARMSTATE',
      title: '状态',
      width: '80px'
    },
    {
      field: 'ISSUETIME',
      width: '130px',
      title: '报修时间'
    },
    {
      field: 'HANDLEUSER',
      width: '120px',
      title: '维修员',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'HANDLETIME',
      width: '130px',
      title: '维修开始时间'
    },
    {
      field: 'WXTEXT',
      width: '200px',
      title: '维修备注',
      showOverflow: true
    },
    {
      field: 'READYMIN',
      width: '100px',
      title: '到岗时长(min)'
    },
    {
      field: 'CHECKTIME',
      width: '130px',
      title: '确认时间'
    },
    {
      field: 'CHECKUSER',
      width: '120px',
      title: '确认人'
    },
    {
      field: 'WORKHOUR',
      width: '100px',
      title: '维修时长(h)'
    },
    {
      field: 'ALARMID',
      width: '100px',
      title: '报警ID',
      showOverflow: true
    }
    // string url = "http://192.168.11.251:8888/machine/" + txtalarmid.Text + ".jpg";
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true,
    // zoom: true,
    custom: true
  },
  data: [],
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});
const showMachineAlarmHis = ref(false);
const alarmImg = ref('');
const machineAlarmHisColumns = ref<DataTableColumns<Factory.MachineAlarm>>([
  {
    title: '处理时间',
    key: 'eventtimekey',
    width: 150
  },
  {
    title: '内容',
    key: 'alarmtext',
    width: 200,
    ellipsis: true
  },
  {
    title: '报警状态',
    key: 'alarmstate',
    width: 150
  },
  {
    title: '创建人',
    key: 'createuser',
    width: 150
  },
  {
    title: '处理人',
    key: 'handleuser',
    width: 150
  },
  {
    title: '确认人',
    width: 150,
    key: 'checkuser'
  }
]);
const machineAlarmHisData = ref<Factory.MachineAlarm[]>([]);
const getMachineAlarmHis = async (alarmID: string) => {
  const result = await fetchMachineAlarmHis(alarmID);
  if (result.data) {
    machineAlarmHisData.value = result.data;
  }
};

const cellDBLClickEvent: VxeTableEvents.CellDblclick = ({ row }) => {
  alarmImg.value = `http://192.168.11.251:8888/machine/${row.ALARMID}.jpg`;
  showMachineAlarmHis.value = true;
  getMachineAlarmHis(row.ALARMID);
};

const handleClose = () => {
  showMachineAlarmHis.value = false;
};

const getMachineAlarmList = async () => {
  const result = await fetchMachineAlarmList(
    dayjs(machineAlarmRange.value[0]).format('YYYYMMDDHHmmss'),
    dayjs(machineAlarmRange.value[1]).format('YYYYMMDDHHmmss')
  );
  if (result.data) {
    machineAlarmOptions.data = result.data;
  }
};
</script>
